<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../js/jquery.blockUI-2.70.js"></script>
    <style>
        .bold-message {
            text-align-last:justify;
            text-align:justify;
            width: 70px;
            min-width: 70px;
            font-weight: bold;
            text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器
        }

        .desc-message-value {
            word-wrap: break-word;
            padding-left: 5px;
            max-height: 70px;
        }

    </style>
</head>
<body>
<button id="show">弹出</button>
<button id="show2">弹出2</button>
<div id="showDiv" style="display: none; font-family:微软雅黑;">
    <div style="background-color:#d9eaee;padding:8px;">
        <div style="height:34px;padding-bottom:5px;font-size:22px; color:#6ba3b6; font-weight:bold;text-align:center;">
            <span style="">检验项目说明信息</span>
            <span style="float:right;"><img id="close_iframe_img" src="../../image/close.gif" align="absmiddle" style="cursor: pointer;" onclick="javascript: $.unblockUI()"/></span>
        </div>
        <div style="background-color:#fff;padding-top:10px; border:1px solid #b6cfd6">
            <div style="padding: 5px;">
                <table  border="0" align="center" style="table-layout: fixed; width: 95%;">
                    <tr>
                        <td class="bold-message">项目名称:</td>
                        <td colspan="9" class="desc-message-value">11|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|</td>
                    </tr>
                    <tr>
                        <td class="bold-message">采集说明:</td>
                        <td colspan="9" class="desc-message-value">11|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|</td>
                    </tr>
                    <tr>
                        <td class="bold-message">项目说明:</td>
                        <td colspan="9" class="desc-message-value">11|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|</td>
                    </tr>
                    <tr>
                        <td class="bold-message">报告说明:</td>
                        <td colspan="9" class="desc-message-value">11|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|</td>
                    </tr>
                    <tr>
                        <td class="bold-message">注意事项:</td>
                        <td colspan="9" class="desc-message-value">11|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|</td>
                    </tr>
                    <tr>
                        <td class="bold-message">适应症:</td>
                        <td colspan="9" class="desc-message-value">11|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|</td>
                    </tr>
                </table>
            </div>
            <!--<tr >
                <td><input id="confirmButton" style="margin-top: 15px" class="btn01" type="button" value="确 定" onclick="javascript: $.unblockUI()"/></td>
            </tr>-->
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

    $(function () {
        $('#show').click(function () {
            var showDivHeight = $('#showDiv').css('height');
            $.blockUI({
                message: $('#showDiv'),
                css: {
                    width: "800px",
                    height: showDivHeight,
                    border: "1px solid #b6cfd6",
                    padding: "1px",
                    top: getTopPos(486),
                    left: getLeftPos(800),
                    maxHeight: "486px",
                    overflow: "auto"
                }
            });
        });

        $('#show2').click(function () {
            $.growlUI('提示', '删除成功!');
        });
    })

    function getTopPos(height) {
        return (document.documentElement.clientHeight - height) / 2 + "px";
    }

    function getLeftPos(width) {
        return (document.documentElement.clientWidth - width) / 2 + "px";
    }

</script>
</html>